<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<title>填写报名信息</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_769379_qa7dvmydty.eot?t=1533004998306'); /* IE9*/
  src: url('//at.alicdn.com/t/font_769379_qa7dvmydty.eot?t=1533004998306#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('//at.alicdn.com/t/font_769379_qa7dvmydty.ttf?t=1533004998306') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_769379_qa7dvmydty.svg?t=1533004998306#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanhui:before { content: "\e627"; }

.icon-go:before { content: "\e675"; }

.icon-businesscard_fill:before { content: "\e60a"; }



    body{
        text-align: center;
    }
    .text-grey{
        color:rgba(134, 142, 150, 0.8) !important
    }
    .text-muted{
        color:#868e96 !important
    }
    #user-photo {
        width:300px;
        height:300px;
        margin-top: 10px;
    }
    #photo {
        max-width:100%;
        max-height:350px;
    }
    .img-preview-box {
        text-align: center;
    }
    .img-preview-box > div {
        display: inline-block;;
        margin-right: 10px;
    }

    .img-preview {
        overflow: hidden;
    }
    .img-preview-box .img-preview-lg {
        width: 150px;
        height: 150px;
    }
    .img-preview-box .img-preview-md {
        width: 100px;
        height: 100px;
    }
    .img-preview-box .img-preview-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .nav_ul {
        background: white;
        border-bottom: 1px solid #4444;
        margin-bottom: 10px;
    }
</style>
</head>
<body style="background: #f3f3f4;overflow-x:hidden;">
<ul class="nav nav-tabs nav-justified nav_ul">
<li class="">
<i class="iconfont icon-fanhui pull-left" style="line-height: 47px;
height: 47px;
margin-left: 8px;" onclick="window.history.back()"></i>
<span class="bg-light navbar-light bg-light" style="height: 47px;line-height: 47px;">报名信息</span>

</li>
</ul>
<form id="signform" method="post">
  <div class="form-row">
    <div class="form-group col-xs-12 text-left">
        
      <label for="username"><span style="color:red;">*</span> 姓名:</label>
      <div class="input-group">
      
      <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>

      <input type="text" class="form-control" id="username" name="username" placeholder="姓名">
      </div>
    </div>
    <input type="hidden" class="form-control"  value="" name="idcardimg">
    <input type="hidden" class="form-control" value="" name="headimg">
    <div class="form-group col-xs-12 text-left">

      <label for="phoneNum" style="text-align: left;"><span style="color:red;">*</span> 手机:</label>
    <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></span>
     <input type="number" maxlength="11" class="form-control" name="telephone"  id="phoneNum" placeholder="手机号">

      </div>
      </div>
    </div>
    <div class="form-row">
    <div class="form-group col-xs-12" style="padding-left: 0px;padding-right: 0px;">
        <div class="col-xs-8 ">
        <input type="text" class="form-control" name="v_code" id="vcode" placeholder="请输入验证码">
        </div>
        <input type="hidden" class="form-control" name="token" value="<?php echo $_GET['token'];?>">
        <button class="btn btn-primary col-xs-3 sendCode" data-loading-text="正在发送..." id="sendactive" type="button">发送验证</button>
    </div>
    </div>
     <div class="form-row">
        <div class="form-group col-xs-12">
            <div class="input-group" data-target="#changeModal" data-toggle="modal">
              <input type="text" class="form-control"  readonly  placeholder="身份证正面照" id="cardinput" aria-describedby="basic-addon2">
              <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-cloud-upload" id="righticon" aria-hidden="true"></span></span>
            </div>
            <div class="text-left text-grey" style="font-size:12px;margin-top: 10px;">
           <span class="glyphicon glyphicon-info-sign" aria-hidden="true"> 我们保证您的身份信息仅用于人脸识别签到服务，不会用于任何其他途径。</span></div>
        </div>
     </div>
</form>
<div class="user-photo-box hidden" >
    <img id="user-photo" src="">
</div>

<div class="img-preview img-preview-sm">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title text-primary mtitle_content">
            <i class="fa fa-pencil"></i>
                        上传身份证照片并截取头像
            </h4>
        </div>
        <div>
            <img src="" id="tmpcompressimg1" style="display: none;" alt="">
            <img src="" id="tmpcompressimg2" style="display: none;" alt="">
        </div>


        <div class="modal-body">
            <p class="tip-info text-center">
                <img style="width: 100%;" src="//wsimg.waoo.cc/upload/goods/2018-07/30/602651532935852.png">
            </p>
            <div class="img-container">
                <img src="" alt="" id="photo">
            </div>
 <!--            <div class="img-preview-box hidden">
                <hr>
                <span>:</span>
                <div class="img-preview img-preview-md">
                </div>
       
            </div> -->
            <div class="row text-danger cardinfo hidden" style="margin-top:20px;margin-bottom: 10px;">
                
            </div>
        </div>
        <div class="modal-footer">
            <label class="btn btn-danger pull-left select_img_btn" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>选择图片</span>
            </label>
            <div style="display: none" id="menu_group" class="pull-right">
            <!-- <button class="btn disabled" disabled="true" onclick="next(this);">下一步</button> -->
            <button class="btn btn-primary disabled okbtn" disabled="true" onclick="sendPhoto();">完成</button>
            <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
            </div>
        </div>
 
    </div>
</div>
</div>
<div>
    <button type="button"  class="btn btn-primary btn_submit"  data-loading-text="正在提交..." style="margin-top:10px;">立即提交</button>
</div>
<div class="footer" style="margin-top: 50px;text-align: center">
    <p class="text-grey" style="font-size: 12px;">-- Powered by 中科华标科技有限公司 --</p>
    <span class="text-grey" style="font-size: 12px;">签到软件、AI技术和人脸识别技术由中科华标提供</span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var cardInfo = {};
    var check_img = {
        cardimg:false,
        avatarimg:false
    };
    var initCropperInModal = function(img, input, modal) {
        var $image = img;
        var $inputImage = input;
        var $modal = modal;
        var options = {
            aspectRatio: 1, // 纵横比
            viewMode: 2,
            preview: '.img-preview' // 预览图的class名
        };
        // 模态框隐藏后需要保存的数据对象
        var saveData = {};
        var URL = window.URL || window.webkitURL;
        var blobURL;
        $modal.on('show.bs.modal',function () {
            // 如果打开模态框时没有选择文件就点击“打开图片”按钮
 
        }).on('shown.bs.modal', function () {
            // 重新创建
            $image.cropper( $.extend(options, {
                ready: function () {
                    // 当剪切界面就绪后，恢复数据
                    if(saveData.canvasData){
                        $image.cropper('setCanvasData', saveData.canvasData);
                        $image.cropper('setCropBoxData', saveData.cropBoxData);
                    }
                    //隐藏选择， 显示取消。
                    $(".select_img_btn").show();
                    $("#menu_group").show();

                }
            }));
        }).on('hidden.bs.modal', function () {
            // 保存相关数据
            saveData.cropBoxData = $image.cropper('getCropBoxData');
            saveData.canvasData = $image.cropper('getCanvasData');
            // 销毁并将图片保存在img标签
            $image.cropper('destroy').attr('src',blobURL);
        });
        if (URL) {
            $inputImage.change(function() {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
                        
                        $(".cardinfo").html('正在检测您的身份信息…');
                        $(".cardinfo").removeClass('hidden');
                        var reader=new FileReader();
                        reader.onload=function(e){
                            console.log('reader base');
                            var _img = new Image();
                            //判断压缩
                            if(file.size > 8388608) {
                                alert('上传文件大小不能超过8M，请重新上传');
                                return false;
                            }
                            if(file.size >= 1048576 && file.size <= 8388608) {
                                img.src = url;
                                compress(reader.result);
                            } 
                             //或者 e.target.result都是一样的，都是base64码
                            var cardfd = new FormData();
                            cardfd.append("card_file", reader.result);
                            
                            $("#tmpcompressimg1").attr('src', reader.result);
                           
                            if(file.size > 8388608) {
                                alert('上传文件大小不能超过8M，请重新上传');
                                return false;
                            }
                            if(file.size >= 1048576 && file.size <= 8388608) {
                               
                            } 
                            $("#menu_group").show();
                            $.ajax({
                                method:"post",
                                url: "{:url('index/meeting/uploadimg')}", //用于文件上传的服务器端请求地址
                                data: cardfd,
                                processData: false,
                                contentType: false,
                                success:function(result){
                                    //成功 展示识别出的 身份号和姓名。
                                    console.log(result);  
                                    var data = result.data;
                                    if(result.code == 0) {
                                        $("input[name='idcardimg']").val(reader.result);
                                        $(".okbtn").attr('disabled',false);
                                        var html ='<div class="form-group col-xs-12 text-left">\
                                                    <label for="cardname" class="text-success"><span style="color:red;">*</span> 真实姓名:</label>\
                                                        <div class="input-group">\
                                                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>\
                                                            <input type="text" class="form-control"  value="'+data.name+'" id="card_name" name="card_name" placeholder="真实姓名">\
                                                        </div>\
                                                    </div>\
                                                    <div class="form-group col-xs-12 text-left">\
                                                    <label for="idcard"  class="text-success"><span style="color:red;">*</span> 身份证号:</label>\
                                                        <div class="input-group">\
                                                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span></span>\
                                                            <input type="text" value="'+ data.idcard +'" class="form-control" id="idcard" name="idcard" placeholder="身份证号">\
                                                        </div>\
                                                    </div>\
                                                    <span class="shorttip">注:请核验信息并截取头像。</span>';
                                        $(".cardinfo").html(html);
                                        check_img.cardimg = true;
                                    } else {
                                        //
                                        check_img.cardimg = false;
                                        $(".okbtn").attr('disabled',true);
                                        $(".cardinfo").html('未识别到身份信息，请重新上传');
                                    }


                                }
                            });

                        }  
                        reader.readAsDataURL(file)
                        if(blobURL) {
                            URL.revokeObjectURL(blobURL);
                        }
                        blobURL = URL.createObjectURL(file);


                        // 重置cropper，将图像替换
                        $image.cropper('reset').cropper('replace', blobURL);

                        //上传身份证

                        // 选择文件后，显示和隐藏相关内容
                        //$('.img-container').removeClass('hidden');
                        //$('.img-preview-box').removeClass('hidden');
                        $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                        $('#changeModal .tip-info').addClass('hidden');


                    } else {
                        window.alert('请选择一个图像文件！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }
    var BaseBlob = {
       dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        blobToDataURL(blob, callback) {
            var a = new FileReader();
            a.onload = function (e) { callback(e.target.result); }
            a.readAsDataURL(blob);
        }
    };

    var sendPhoto = function(){
        
        var Obj =$('#photo').cropper('getCroppedCanvas',{
            width:358,
            height:441
        }).toBlob(function(blob){
            
            // 转化为blob后更改src属性，隐藏模态框
            BaseBlob.blobToDataURL(blob, function(res) {
                //上传人脸
            // var fd = new FormData();
            //fd.append("card_file", card_file);
                var fd = new FormData();
                fd.append("avatar_file", res);
                $(".shorttip").text('正在检测中,请等待…');
                $.ajax({
                    method:"post",
                    url: "{:url('index/meeting/uploadimg')}", //用于文件上传的服务器端请求地址
                    data: fd,
                    processData: false,
                    contentType: false,
                    success:function(result) {
                        if(result.code == 0) {
                            //成功
                           // $(".cardinfo").html('');
                            $("input[name='headimg']").val(res);
                            check_img.avatarimg = true;
                            $(".shorttip").addClass('text-success').html('上传成功！');
                            $("#cardinput").attr('placeholder','√ 已完成');
                            $("#righticon").hasClass('glyphicon-cloud-upload') ? $("#righticon").removeClass('glyphicon-cloud-upload').addClass('glyphicon-repeat') : '';
                            setTimeout(
                                function () {
                                    $('#changeModal').modal('hide');
                                }, 2000
                            );
                           
                        } else {
                            //
                           //$(".okbtn").attr('disabled',true);
                           //$(".shorttip").addClass('text-success').html('上传成功！')
                            check_img.avatarimg = false;
                            $(".cardinfo").html('未识别到人脸信息，请重新截取');
                        }
                    }
                });
            })
            // var avatar_file = URL.createObjectURL(blob);
            // $('#user-photo').attr('src',avatar_file);
            // console.log(URL.createObjectURL(blob));
            // var card_file = $("#photo").attr('src');                            // ajax请求， 识别接口  完成后返回身份照号。改变placehodler
            // var fd = new FormData();
            // fd.append("card_file", card_file);
            // fd.append("avatar_file", avatar_file);
            // $.ajax({
            //     method:"post",
            //     url: "{:url('index/meeting/uploadimg')}", //用于文件上传的服务器端请求地址
            //     data: fd,
            //     processData: false,
            //     contentType: false,
            //     success:function(result){
            //     //do something

            //     }
            // });
        });
            
        
        };
    
    function check_phone() {
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            var phoneNum = $('#phoneNum').val();
            var flag = reg.test(phoneNum); 
            if(!flag) {
               return false;

            }   
            return true;
    }

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas');

    //压缩图片
    function compress(base64) {
        var image = new Image(),newBase64,MAX_HEIGHT = 160;
        image.onload = function(){
            var canvas = document.getElementById("myCanvas");
            if(image.height > MAX_HEIGHT) {
                image.width *= MAX_HEIGHT / image.height;
                image.height = MAX_HEIGHT;
            }
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0, image.width, image.height);
            newBase64=canvas.toDataURL('image/jpeg',0.4);
        };
        image.src = newBase64;
        console.log(image);
    }
    
    
    $(function(){
        initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
        //js 验证手机

        $(".btn_submit").click(function() {

            var postdata = $("#signform").serialize();
            var cardname = $("#card_name").val();
            console.log(cardname);
            var idcard = $("#idcard").val();
            postdata +='&card_name='+cardname;
            postdata += '&idcard='+idcard;
            console.log(postdata);
           
            //验证。提交
            if($("#username").val() == '') {
                alert('请输入姓名!');
                return false;
            }
            if($("#phoneNum").val() =='') {
                alert('请输入手机号码');
                return false;
            } else if(!check_phone()) {
                alert('您输入的手机号不正确');
                return false;
            }
            if(idcard == '' || cardname==''){
                alert('请先上传身份证照片');
                return false;
            }
            if($("#vcode").val() =='') {
                alert('请输入验证码');
                return false;
            }
            if(!check_img.avatarimg) {
                alert('头像信息未识别，请重新截取');
                return false;
            }
            if(!check_img.cardimg) {
                alert('身份证信息未识别，请重新上传');
                return false;
            }
            if($("#card_name").val() == '') {
                alert('请核验身份证真实姓名!');
                return false;
            }
            if($("#idcard").val() == '') {
                alert('请先核验身份证号码!');
                return false;
            }
            $(this).button('loading');
            //提交
            $.ajax({
                type: "POST",
                url: "{:url('index/Thirdpaid/signUp')}",
                data: postdata,
                dataType: "json",
                success: function(res) {
                    if(res.code == 202) {
                        alert(res.msg);
                        $(".btn_submit").button('reset');
                        return false;
                    } else if(res.code == 200) {
                        window.location.href = "{:url('index/meeting/over')}?access_key="+res.data;
                    }
                }
             });
        });

        var jsendactive = $('#sendactive');
        var jmobile = $('#phoneNum');
        jsendactive.on('click', function() {
            if($("#phoneNum").val() == '') {
                alert('请输入手机号码');
                return false;
            }
            if(!check_phone()) {
                alert('您输入的手机号不正确');
                return false;
            }
            jsendactive.button('loading');
            $.ajax({
                 type: "POST",
                 url: "{:url('index/Thirdpaid/verifyCode')}",
                 data: {phone:$("#phoneNum").val()},
                 dataType: "json",
                 success: function(res){
                    if(res.code == 200) {
                        button_count_down(jsendactive, '{time}s后重试', 60);
                        return;
                    } else  {
                        jsendactive.button('reset');
                        alert(res.msg);
                        return;
                    }    
                }
            });
        });

        // 倒计时
        function button_count_down(jbutton, text, seconds) {
          jbutton.attr('disabled',true);
          if(window.button_count_down_t) clearInterval(window.button_count_down_t);
          window.button_count_down_t = setInterval(function() {
            if(seconds-- <= 0) {
              clearInterval(window.button_count_down_t);
              window.button_count_down_t = 0;
              jbutton.button('reset');
              return;
            }
            text2 = text.replace('{time}', seconds);
            jbutton.text(text2);
          }, 1000);
        }

        //下一步
        

    });
</script>
</body>
</html>